<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>   <!--引入vue.js文件-->
    <script src="element-ui/lib/index.js"></script>   <!--引入组件库-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">  <!--引入样式库-->
    <script src="js/axios-0.18.0.js"></script>
    <style>
        .product-display {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .product-info {
            padding: 10px;
            text-align: center;
        }

        .product-image {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="product-display">
        <el-card shadow="hover" style="width: 300px" v-for="(item,index) in products" :key="item.productsid">
            <div slot="header" class="clearfix">
                <span>商品展示</span>
            </div>
            <div class="product-image">
                <img :src="item.productsimage" alt="Product Image" style="width: 100%">
            </div>
            <div class="product-info">
                <h4>{{ item.productsname }}</h4>
                <p>单价: {{ item.price }}</p>
                <p>库存: {{ item.num }}</p>
            </div>
            <div style="display: flex;justify-content: center">
                <el-button type="danger" plain @click="purchaseProduct(item.productsid)">立刻抢购</el-button>
            </div>
        </el-card>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            products: [],
            useruid:'',
            isLogin: false,
            name:'',
            password:'',
        },
        mounted() {
            this.findProducts();
        },
        methods: {
            findProducts() {
                axios.get('tasks/findProducs')
                    .then(response => {
                        this.products = response.data;
                        this.findUser();
                    })
                    .catch(error => {
                        console.error('Error fetching products', error);
                    });
            },
            purchaseProduct(productsid) {
                // 发送购买请求到后端处理
                console.log(productsid+"pro"+this.useruid)
                axios.get('orders/addOrders', {params:{ productsid: productsid,uid:this.useruid }})
                    .then(response => {
                        if (response.data === "OK") {
                            // 购买成功处理，更新本地数据或提示用户
                            console.log('Product purchased successfully');
                        } else {
                            // 库存不足处理或其他错误提示
                            console.error('Purchase failed:', response.data);
                        }
                    })
                    .catch(error => {
                        console.error('Error purchasing product', error);
                    });
            },
            findUser(){
                this.name = getCookie("name");
                this.password = getCookie("password");

                if (this.name && this.name.trim() !== "" && this.password && this.password.trim() !== "") {
                    this.isLogin = true;
                } else {
                    this.isLogin = false;
                }
                // 辅助函数，用于获取cookie的值
                function getCookie(name) {
                    let cookieArr = document.cookie.split(";");
                    for(let i = 0; i < cookieArr.length; i++) {
                        let cookiePair = cookieArr[i].trim().split("=");
                        if (cookiePair[0] === name) {
                            return cookiePair[1];
                        }
                    }
                    return "";
                }
                axios.get("users/findByName_pwd",{params:{name : this.name,password:this.password}}).then(x=>{
                    this.useruid = x.data.uid;
                })
            },
        }
    });
</script>

</body>
</html>